<template>
	<view :style="objColor">
		<customer></customer>
		<!-- orderSub/pages/orderDetails/orderDetails.wxml -->
		<!-- <view class="box-detail">
      <capsule
        v-if="!showCustom"
        txtColor="#18181A"
        image="https://oos-cn.ctyunapi.cn/front-end/static/static/back.png"
        title="订单详情"
        :show_bol="false"
      ></capsule>
      <navLod
        v-if="showCustom"
        txtColor="#18181A"
        bgColor="#FFFFFF"
        image="https://oos-cn.ctyunapi.cn/front-end/static/static/back.png"
        title="订单详情"
        :show_bol="false"
      ></navLod>
    </view> -->
		<image class="header-image" :src="(mixOtherIconList[5] && mixOtherIconList[5].icon)" style="width: 100%"></image>

		<view class="detCon">


			<view class="demarcation">
				<view class="detTopCon" v-if="det.billStatus == 13 || det.billStatus == 12 || det.billStatus == 11">
					<view class="detTopName">订单待支付</view>
					<!-- #V2G功能 -->
					<view v-if="isv2g" class="detTopText">感谢使用，请及时支付订单避免影响后续放电！</view>
					<view v-else class="detTopText">感谢使用，请及时支付订单避免影响后续充电！</view>
				</view>
				<view class="detTopCon" v-else>
					<view class="detTopName">订单已完成</view>
					<view class="detTopText" v-if="det.disposableOrder">感谢使用，退款会在1～7个工作日内原路退回！！</view>
					<view class="detTopText" v-else>{{ isv2g ? '感谢使用，期待再次放电！' : '感谢使用，期待再次充电！' }}</view>
				</view>
				<view class="orderInfoCon" :style="'padding-bottom: ' + (orderStatus == 2 ? '150rpx' : '150rpx') + ';'
          ">

					<view class="demCon infoCon">

						<view class="demCenter">
							<!-- 微信支付分显示待支付金额 -->
							<template v-if="det.billStatus == 11 && det.wxppOrder">
								<view class="demNum">
									<text class="symbol">￥</text>
									{{ (det.arrears / 100).toFixed(2) }}
									<!-- {{orderStatus == 2 ? det.arrears : det.actualBalance}} -->
								</view>
								<view class="demTitle">待支付金额</view>
							</template>
							<template v-else>
								<view class="demNum">
									<text class="symbol">￥</text>
									{{ det.actualBalanceCalculate || '' }}
								</view>
								<view class="demTitle">实付金额</view>
							</template>


							<!-- <view class="demState">
                订单状态：
                <text
                  :style="
                    'color: ' +
                    (det.billTypeStr == '进行中'
                      ? '#606266'
                      : det.billTypeStr == '待支付'
                      ? '#FC724C'
                      : '#78C744') +
                    ';'
                  "
                >
                  {{ det.billTypeStr }}
                </text>
                <image
                  :src="
                    'https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/' +
                    (det.billTypeStr == '进行中'
                      ? 'close'
                      : det.billTypeStr == '待支付'
                      ? 'pay'
                      : 'finish') +
                    '.png'
                  "
                />
              </view> -->
						</view>


						<view class="demMoneyCon">
							<view class="demMoneyList" v-if="det.payMode == 6 && det.payAccountStr== '个人' && prepaidCardSwitch">
                <view class="demMoneyTitle">
                 优惠金额  
                </view>
                <view class="totalCon">
                  <text class="demMoneyVal">
                    -￥
                    <text class="tc">{{ det.busBalance }}</text>
                  </text>
                </view>
              </view>
							<view class="demMoneyList" v-if="det.totalDiscountBalance > 0">
								<view class="demMoneyTitle">
									优惠金额
								</view>
								<view class="totalCon">
									<text class="demMoneyVal">
										-￥
										<text class="tc">{{ det.totalDiscountBalance }}</text>
									</text>
								</view>
							</view>
							<view class="demMoneyList" v-if="det.deductibleBalance > 0">
								<view class="demMoneyTitle">
									奖励金抵扣
								</view>
								<view class="totalCon">
									<text class="demMoneyVal">
										-￥
										<text class="tc">{{ det.deductibleBalance }}</text>
									</text>
								</view>
							</view>
							<!-- 						<view class="demMoneyList" v-if="det.deductibleBalance > 0">
								<view class="demMoneyTitle">
									奖励金抵扣
								</view>
								<view class="totalCon">
									<text class="demMoneyVal">
										-￥
										<text class="tc">{{ det.deductibleBalance }}</text>
									</text>
								</view>
							</view> -->


							<view class="demMoneyList">
								<!-- <view class="demMoneyTitle">订单总金额</view> -->

								<!-- 831订单总金额 加入专享价图标 -->
								<view class="demMoneyTitle price_view">
									<view class="text_view">
										<text>订单总金额</text>
									</view>
									<view class="img_view" v-if="det.exclusiveBill">
										<image class="v_icon"
											src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/small/zxcdj.png"
											mode="scaleToFill" />
									</view>
								</view>

								<view class="totalCon">
									<view class="demMoneyVal">
										￥
										<text class="tc">{{ det.busBalance }}</text>
									</view>
									
									<!-- #V2G功能 -->
									<template v-if="!isv2g">
										<view class="totalDetailed" v-if="det.terminalType!=2">电费:¥{{ det.powerBalance }} | 服务费:¥{{
											det.serviceBalance
										}}</view>
											<!--  -->
											<view class="totalDetailed" v-else>
											电费:¥{{ det.powerBalance }} | 服务费:¥{{ det.serviceBalance }} | 最大功率:{{ det.maxPower }}w
										</view>
									</template>
								</view>
							</view>


							<!-- <van-collapse :value="activeNames" @change="onChange">
                                <van-collapse-item name="1"> -->

							<!-- <view slot="title">
                                        <view class="demMoneyTitle">优惠金额</view>
                                    </view>
                                    <view slot="value">
                                        <view class="demMoneyVal">
                                            -￥
                                            <text class="tc">{{ det.totalDiscountBalance }}</text>
                                        </view>
                                    </view> -->

							<!-- </van-collapse-item>
                            </van-collapse> -->
							<!-- <orderCollapse>
                <orderCollapseItem
                  title="优惠详情"
                  title-border="none"
                  :value="det.totalDiscountBalance"
                >
                
                </orderCollapseItem>
              </orderCollapse> -->

							<view v-if="showShrink">
								<!-- 优惠详情 基础平台831字段 && 营销获客2.0字段 -->
								<template
									v-if="det.memberDiscountBalance > 0 || det.discountBalance > 0 || det.cashCouponBalance > 0 || det.groupDiscountBalance > 0 || det.chargeCardBalance || det.useCouponAmount || det.finishedBillDetail.couponDiscountFee || det.memberDiscountFee > 0">
									<view class="demMoneyList">
										<view class="demMoneyTitle"
											v-if="det.memberDiscountBalance > 0 || det.discountBalance > 0 || det.cashCouponBalance > 0 || det.groupDiscountBalance > 0 || det.chargeCardBalance || det.useCouponAmount || det.finishedBillDetail.couponDiscountFee | det.memberDiscountFee > 0">
											优惠详情
										</view>
									</view>
									<view class="content">
										<view class="demMoneyMore">
											<view class="MoneyMoreList" v-if="det.memberDiscountBalance > 0">
												<view>{{
                          det.payAccountStr == "个人"
                          ? "会员折扣(个人会员)"
                          : "会员折扣(车队会员)"
                        }}</view>
												<view class="demMoneyVal">
													-￥
													<text class="tc1">{{
                            det.memberDiscountBalance
                          }}</text>
												</view>
											</view>


											<!-- 831优惠展示 -->
											<!-- 原站点优惠改为电站促销, 新增集团折扣 -->
											<view class="MoneyMoreList" v-if="det.discountBalance > 0">
												<view>电站促销</view>
												<view class="demMoneyVal">
													-￥
													<text class="tc1">{{ det.discountBalance }}</text>
												</view>
											</view>
											<!-- <view class="MoneyMoreList" v-if="det.useCouponAmount > 0">
												<view>服务费抵扣金额</view>
												<view class="demMoneyVal">
													-￥
													<text class="tc1">{{ det.useCouponAmount }}</text>
												</view>
											</view> -->

											<view class="MoneyMoreList" v-if="det.groupDiscountBalance > 0">
												<view>集团折扣</view>
												<view class="demMoneyVal">
													-￥
													<text class="tc1">{{ det.groupDiscountBalance }}</text>
												</view>
											</view>

											<view class="MoneyMoreList" v-if="det.cashCouponBalance > 0">
												<view>{{ det.couponTypeStr }}</view>
												<view class="demMoneyVal">
													-￥
													<text class="tc1">{{ det.cashCouponBalance }}</text>
												</view>
											</view>
											<!-- 											<view class="MoneyMoreList" v-if="det.deductibleBalance > 0">
												<view class="demMoneyTitle">
													奖励金抵扣
												</view>
												<view class="totalCon">
													<text class="demMoneyVal">
														-￥
														<text class="tc">{{ det.deductibleBalance }}</text>
													</text>
												</view>
											</view> -->
											<!-- 						<view class="MoneyMoreList" v-if="det.chargeCardUsage == 1 || det.chargeCardUsage == 2">
												<view>预设充电量(电量卡)</view>
												<view class="demMoneyVal">
													<text class="tc1">{{ det.preChargeCardPower/1000 }}度</text>
												</view>
											</view>
											<view class="MoneyMoreList" v-if="det.chargeCardUsage == 1 || det.chargeCardUsage == 2">
												<view>结算退回(电量卡)</view>
												<view class="demMoneyVal">
													<text class="tc1">{{ det.chargeCardReturnPower/1000 }}度</text>
												</view>
											</view> -->
											<!-- 营销获客2.0新增 -->
											<view class="MoneyMoreList" v-if="det.chargeCardUsage == 1 ||det.chargeCardUsage==2">
												<view>电量卡抵扣费用</view>
												<view class="demMoneyVal">
													-￥
													<text class="tc1">{{ det.chargeCardBalance }}</text>
												</view>
											</view>
											<!-- <view class="MoneyMoreList" v-if="det.finishedBillDetail.payMemberDiscountFee > 0">
												<view>会员优惠</view>
												<view class="demMoneyVal">
													-￥
													<text class="tc1">{{ det.finishedBillDetail.payMemberDiscountFee }}</text>
												</view>
											</view> -->

											<view class="MoneyMoreList" v-if="det.memberDiscountFee > 0">
												<view>会员优惠</view>
												<view class="demMoneyVal">
													-￥
													<text class="tc1">{{ det.memberDiscountFee }}</text>
												</view>
											</view>

											<!-- 												  <view class="MoneyMoreList" v-if="det.finishedBillDetail.payMemberDiscountFee > 0">
					    <view>活动优惠-单笔优惠</view>
					    <view class="demMoneyVal">
					      -￥
					      <text class="tc1">{{ det.finishedBillDetail.payMemberDiscountFee }}</text>
					    </view>
					  </view> -->
											<view class="MoneyMoreList" v-if="det.discountCardBalance > 0">
												<view>卡优惠</view>
												<view class="demMoneyVal">
													-￥
													<text class="tc1">{{ det.discountCardBalance }}</text>
												</view>
											</view>

											<view class="MoneyMoreList" v-if="det.finishedBillDetail.couponDiscountFee > 0">
												<view>券优惠</view>
												<view class="demMoneyVal">
													-￥
													<text class="tc1">{{ det.finishedBillDetail.couponDiscountFee }}</text>
												</view>
											</view>
										</view>
									</view>
								</template>

								<!-- 储值卡 -->
                <template v-if="det.payMode == 6 && det.payAccountStr== '个人' && prepaidCardSwitch">
                  <view class="demMoneyList">
                    <view class="demMoneyTitle">优惠详情</view>
                  </view>
                  <view class="content">
                    <view class="demMoneyMore">
                      <view class="MoneyMoreList">
                        <view>储值卡抵扣费用</view>
                        <view class="money">
                          -￥
                          <text class="tc1">{{ det.busBalance }}</text>
                        </view>
                      </view>
                    </view>
                  </view>
                </template>

								<!-- 电量卡==1 不显示 个人钱包 -->
								<template>
									<view class="demMoneyList">
										<view class="demMoneyTitle">
											费用详情
										</view>
									</view>
									<view class="content">
										<view class='demMoneyMore' v-if='det.chargeCardUsage === 1 || det.chargeCardUsage === 2'>
											<view class="MoneyMoreList">
												<view>{{ isv2g ? '预设放电量(电量卡)' : '预设充电量(电量卡)' }}</view>
												<view class="demMoneyVal">
													<text class="tc1">{{ det.preChargeCardPower/1000 }}度</text>
												</view>
											</view>
											<view class="MoneyMoreList">
												<view>结算退回(电量卡)</view>
												<view class="demMoneyVal">
													<text class="tc1">{{ det.chargeCardReturnPower/1000 }}度</text>
												</view>
											</view>
										</view>
										<view class="demMoneyMore" v-if="det.chargeCardUsage != 1 && det.chargeCardUsage != 2">
											<view class="MoneyMoreList2">
												<!-- 添加微信支付分判断状态 -->
												<view v-if="det.wxppOrder">预付金额（微信支付分)</view>
												<view v-else>
													{{ det.payAccountStr == "个人" ? (det.payMode == 6 && prepaidCardSwitch ? '预付金额(储值卡)': det.disposableOrder ? "预付金额（充完即退)" : "预付金额（个人钱包)") : (det.payMode == 6 && prepaidCardSwitch ? '消费金额（储值卡支付)' :'预付金额（车队钱包)') }}
												</view>
												<view class="money">
													￥
													<text class="tc1" v-if="det.payMode == 6 && prepaidCardSwitch">{{ '****' }}</text>
													<text class="tc1" v-else>{{ det.preFrozenAmount ? det.preFrozenAmount : '0' }}</text>
												</view>
											</view>
											<view class="totalDetailed">{{ det.createTime }}</view>
											<!-- 添加微信支付分判断状态不显示结算退回 -->
											<template v-if="!det.wxppOrder">
												<block v-if="det.disposableOrder">
													<block v-if="det.refundObj">
														<view class="MoneyMoreList2">
															<view>结算退回（充完即退)</view>
															<view class="money">
																-￥
																<text
																	class="tc1">{{ det.refundObj ? (det.refundObj.money / 100).toFixed(2) : '0' }}</text>
															</view>
														</view>
														<view class="totalDetailed">{{ det.refundObj ? det.refundObj.realTime : '-' }}</view>
													</block>
												</block>
												<block v-else-if="det.payAccountStr == '个人'">
													<!-- 只有个人身份显示结算退回，其他身份不显示 -->
													<view class="MoneyMoreList2">
														<view>{{ det.payAccountStr == "个人" ? (det.payMode == 6 && prepaidCardSwitch ? '结算退回(储值卡)':'结算退回（个人钱包)') : '结算退回（车队钱包)' }}</view>
														<view class="money">
															￥
															<text class="tc1">{{ det.backAmountCalculate ? det.backAmountCalculate : '0' }}</text>
														</view>
													</view>
													<view class="totalDetailed">{{ det.refundObj ? det.refundObj.realTime : '-' }}</view>
												</block>
												<block v-else-if="det.payAccountStr == '个人'">
													<!-- 只有个人身份显示结算退回，其他身份不显示 -->
													<view class="MoneyMoreList2">
														<view>{{ det.payAccountStr == "个人" ? '结算退回（个人钱包)' : '结算退回（车队钱包)' }}</view>
														<view class="money">
															￥
															<text class="tc1">{{ det.backAmountCalculate ? det.backAmountCalculate : '0' }}</text>
														</view>
													</view>
													<view class="totalDetailed">{{ det.updateTime }}</view>
												</block>
											</template>
											<block v-if="det.disposableOrder && det.walletPayObj.length != 0">
												<block v-for="(item, index) in det.walletPayObj" :key="index">
													<view class="MoneyMoreList2">
														<view>超出金额(个人钱包)</view>
														<view class="money">
															￥
															<text class="tc1">{{ (item.money / 100).toFixed(2) }}</text>
														</view>
													</view>
													<view class="totalDetailed">{{ item.realTime }}</view>
												</block>
											</block>
											<block v-if="det.disposableOrder && det.wechatPayObj">
												<view class="MoneyMoreList2">
													<!-- #ifdef MP-ALIPAY -->
													<view>超出金额(支付宝支付)</view>
													<!-- #endif -->
													<!-- #ifndef MP-ALIPAY -->
													<view>超出金额(微信支付)</view>
													<!-- #endif -->
													<view class="money">
														￥
														<text
															class="tc1">{{ det.wechatPayObj ? (det.wechatPayObj.money / 100).toFixed(2) : '0' }}</text>
													</view>
												</view>
												<view class="totalDetailed">{{ det.wechatPayObj ? det.wechatPayObj.realTime : '-' }}</view>
											</block>
										</view>
									</view>
								</template>

								<view class="demMoneyList" v-if="orderStatus == 1">
									<view class="demMoneyTitle">退款金额</view>
									<view class="totalCon">
										<text class="demMoneyVal">
											￥
											<text class="tc">{{
                        det.refundCoupon ? det.refundCoupon : 0
                      }}</text>
										</text>
									</view>
								</view>

								<!-- 营销获客2.0新增 已移入放进到优惠详情dom了, 看上面 -->


							</view>
						</view>

						<view class="shrink" @tap="showShrinkButton">{{ showShrink ? '收起费用明细' : '展开费用明细' }}>
							<!-- <image
								:src="showShrink ? sellerNo == 'jw' ? 'https://oos-cn.ctyunapi.cn/front-end/static/mine/images/orderUpper-blue.png' : 'https://oos-cn.ctyunapi.cn/front-end/static/cartoon/orderUpper.png' : sellerNo == 'jw' ? 'https://oos-cn.ctyunapi.cn/front-end/static/mine/images/orderLower-blue.png' : 'https://oos-cn.ctyunapi.cn/front-end/static/cartoon/orderLower.png'"
								class="turn"></image> -->

							<view :class="showShrink ? 'sanjiao-icon' : 'sanjiao-icon-up'"></view>
							<!--  <van-radio slot="right-icon" checked-color="#1487FA" :name="item.payType" /> -->
						</view>
					</view>


					<!-- 订单信息 -->
					<view class="infoCon">
						<view class="demMoneyCon">
							<view class="demMoneyList">
								<view class="demMoneyTitle">订单编号</view>
								<view class="totalCon">
									<text class="order">{{ det.busShowNo }}</text>
									<text class="copyButton" @tap="copyOrder" :data-busId="det.busShowNo">复制</text>
								</view>
							</view>
							<view class="infoList">
								<view class="infoListTitle">{{ isv2g ? '放电站点' : '充电站点' }}</view>
								<view class="infoListVal">{{
                  det.stationName ? det.stationName : "--"
                }}</view>
							</view>
							<view class="infoList">
								<view class="infoListTitle">{{ isv2g ? '放电桩枪' : '充电桩枪' }}</view>
								<view class="infoListVal">{{ det.pileName ? det.pileName : "--"
                }}{{ det.gunName ? "-" + det.gunName : "" }}</view>
								<!-- {{ det.gunName ? "-" + det.gunName : "" }} -->
							</view>
							<view class="infoList">
								<view class="infoListTitle">电桩编号</view>
								<view class="infoListVal">{{ det.pileNumber }}</view>
								<!-- -{{det.gunNumber}} -->
							</view>
						</view>
					</view>

					<view class="placeholPileInfo" v-if="det.stationOccupy == 1 && det.occupyBill">
						<view class="head flex-row-between">
							<view class="title">占位信息</view>
							<!-- <view class="status">待支付</view> -->
							<view class="status" v-if="det.occupyBill.billStatus == 11">待支付</view>
							<view class="status1" v-if="det.occupyBill.billStatus == 14">已支付</view>
							<view class="status2" v-if="det.occupyBill.billStatus == 18">已退款</view>
						</view>
						<view class="center flex-row-between">
							<view class="center-item flex-column-center">
								<view class="minute">{{ det.occupyBill.duration }}<text>分钟</text></view>
								<view class="desc">总占位时长</view>
							</view>
							<view class="center-item flex-column-center">
								<view class="minute">{{ det.occupyBill.actualDuration }}<text>分钟</text></view>
								<view class="desc">超时占位时长</view>
							</view>
							<view class="center-item flex-column-center">
								<view class="minute">{{ det.occupyBill.busBalance | regFenToYuan }}<text>元</text></view>
								<view class="desc">超时占位费用</view>
							</view>
						</view>
						<view class="flex-row-end">
							<view class="p-btn flex-row-center" style="margin-right: 10rpx;"
								@click="toPlaceholderOrderDetail(det.occupyBill.id)">查看详情</view>
						</view>

					</view>
					<view class="infoCon">
						<view class="infoTop">
							<view class="gunName">{{ isv2g ? '放电信息' : '充电信息' }}</view>
							<view>
								<view class="status" v-if="det.chargeType == 'man'">慢充</view>
								<view class="status" v-if="det.chargeType == 'kuai'">快充</view>
								<view class="status" v-if="det.chargeType == 'overTake'">超充</view>
								<view class="status">{{
                  det.pileCurrentMode == 1 ? "直流" : det.pileCurrentMode == 2 ? "交流" : det.pileCurrentMode == 3
                    ? '交直流一体' : det.pileCurrentMode == 4 ? '无线设备' : '其他'
                }}</view>
							</view>
						</view>
						<view class="infoTimeline">
							<view class="infoTimeCon">
								<view class="infoTimeData">{{ det.timeS[0] }}</view>
								<view>
									<text class="infoTime">{{ det.timeS[1] }}</text>
									<!-- <text class="infoTimeData">起</text> -->
								</view>
							</view>
							<view>
								<view class="processCon">
									{{ det.difference }}
								</view>
								<view class="processReason">
									<!-- {{ det.endReasonStr ? det.endReasonStr : "" }} -->
									{{ isv2g ? '放电时长' : '充电时长' }}
								</view>
							</view>
							<view class="infoTimeCon">
								<view class="infoTimeData">{{ det.timeE[0] }}</view>
								<view>
									<text class="infoTime">{{ det.timeE[1] }}</text>
									<!-- <text class="infoTimeData">止</text> -->
								</view>
							</view>
						</view>

						<view class="OrderReason">
							<!-- <image src="https://oos-cn.ctyunapi.cn/front-end/static/cartoon/orderTip.png" class="turn"></image> -->
							停止原因: {{ det.endReasonStr ? det.endReasonStr : isv2g ? '暂无停止放电原因' : '暂无停止充电原因'}}
						</view>

						<view v-if="showInfo">
							<view class="orderBottom"></view>
							<view class="infoList">
								<view class="infoListTitle">{{ isv2g ? '放电车辆' : '充电车辆' }}</view>
								<view class="infoListVal">{{
                  det.plateNo ? det.plateNo : "--"
                }}</view>
							</view>
							<view class="infoList">
								<view class="infoListTitle">{{ isv2g ? '已放电量' : '已充电量' }}</view>
								<view class="infoListVal">{{ det.sumPower }}度</view>
							</view>
							<view class="infoList" v-if="det.terminalType!=2">
								<view class="infoListTitle">结束SOC</view>
								<view class="infoListVal">{{ det.endSoc ? det.endSoc : "0" }}%</view>
							</view>
						</view>

						<view class="shrink" @tap="InfoShrinkButton">{{ showInfo ? `收起${isv2g ? '放电' : '充电'}信息` : `${isv2g ? '放电' : '充电'}` }}
							<!-- <image
								:src="showInfo ? sellerNo == 'jw' ? 'https://oos-cn.ctyunapi.cn/front-end/static/mine/images/orderUpper-blue.png' : 'https://oos-cn.ctyunapi.cn/front-end/static/cartoon/orderUpper.png' : sellerNo == 'jw' ? 'https://oos-cn.ctyunapi.cn/front-end/static/mine/images/orderLower-blue.png' : 'https://oos-cn.ctyunapi.cn/front-end/static/cartoon/orderLower.png'"
								class="turn"></image> -->
							<view :class="showInfo ? 'sanjiao-icon' : 'sanjiao-icon-up'"></view>
							<!--  <van-radio slot="right-icon" checked-color="#1487FA" :name="item.payType" /> -->
						</view>
					</view>

					<view class="orderClothes">
						如有疑问请联系<text class="orderClothesText" @tap="call">客服</text>
					</view>

					<!-- <view class="costCon">
            <view class="costTop">
              <view class="costName">费用详情</view>
            </view>
            <view> -->
					<!-- <uni-steps :options="steps" direction="column" :active="2"></uni-steps> -->
					<!-- <orderSteps
                :options="steps"
                direction="column"
                :active="2"
              ></orderSteps> -->
					<!-- <uni-steps :options="[{title:'买家下单',desc:'2018-11-11'},{title:'卖家发货',desc:'2018-11-12'},{title:'买家签收',desc:'2018-11-13'},{title:'交易完成',desc:'2018-11-14'}]" direction="column" :active="2"></uni-steps> -->
					<!-- <van-steps :steps="steps" :active="active" direction="vertical" active-color="#1487FA" desc-class="costDet"></van-steps> -->
					<!-- </view>
          </view> -->

					<view class="parkingRate" @tap="clickExplain" v-if="orderStatus == 2">
						<image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/infor.png"></image>
						支付说明
					</view>
				</view>
			</view>
		</view>
		<!-- 支付说明 -->
		<view v-if="orderStatus == 2">
			<!-- <van-transition :show="explain" custom-class="block" name="slide-up"> -->
			<view class="explainTipsCon" v-if="explain">
				<view class="explainTipsImg">
					<image src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/close.png" @tap="clickExplain" />
				</view>
				<view class="explainTipsText">1、支付方式为个人账户/车队账户的，充值账户后系统将从目标账户中自动扣款。</view>
				<view class="explainTipsText">2、支付方式为微信支付分的，系统将从目标渠道自动扣款。</view>
			</view>
			<!-- </van-transition> -->

			<view class="paymentCon">
				<view @tap="goPay" :data-busId="det.busId">去支付</view>
			</view>
		</view>

		<view class="refundTipsCon" v-if="showRefundTips && orderStatus == 1" @tap="showRefundTipsFun">
			<image src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/refundClose.png" />
			退款成功，已退{{ det.refundCoupon ? det.refundCoupon : 0 }}元，已关闭
		</view>

		<view class="refundCon" v-if="showPaidTips && (det.billStatus == 13 || det.billStatus == 12)"
			@tap="showPaidTipsFun">
			<image src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/refundClose.png" />
			待支付{{ (det.arrears / 100).toFixed(2) }}元，已支付{{ det.actualBalance }}
		</view>


		<!-- 充完即退-欠款订单 -->
		<view v-if="(det.billStatus == 13 || det.billStatus == 12) && det.disposableOrder">
			<view class="paymentCon">
				<view @tap="unifiedOrders">立即支付</view>
			</view>
		</view>
		<view class="order_msg">
			<view class="order_btn" @tap="orderTop" :data-stationid="det.stationId">
				<!-- <text v-if="det.commentStatus == 0">评论</text>
        <text v-if="det.commentStatus == 1">查看评论</text> -->
				<text>{{ isv2g ? '再次放电' : '再次充电' }}</text>
			</view>
		</view>


		<uni-popup ref="showCustomerPup" type="dialog">
			<uni-popup-dialog type="info" cancelText="取消" confirmText="呼叫" title="温馨提示" @confirm="callCustomer"
				@close="onCloseCustomer">
				<view>
					<view class="info">
						<view class="infoTitle">联系客服：</view><text class="infoValue">{{ serviceInfo.customerTelephone }}</text>
					</view>
					<view class="info">
						<view class="infoTitle">工作时间：</view>{{ serviceInfo.customerServiceTime }}
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script>
	"use strict";
	import { getSellerPayConfigBySellerId } from '@/api/apiServe';
import capsule from "../../../components/nav/nav";
import navLod from "../../../components/navLod/navLod";
import orderSteps from "orderSub/components/orderSteps/orderSteps";
import orderCollapseItem from "orderSub/components/orderCollapse/components/uni-collapse-item/uni-collapse-item.vue";
import orderCollapse from "orderSub/components/orderCollapse/components/uni-collapse/uni-collapse.vue";
	// import vanCollapse from '@vant/weapp/collapse/index';
	// import vanCollapseItem from '@vant/weapp/collapse-item/index';
	// import vanSteps from '@vant/weapp/steps/index';
	// import vanTransition from '@vant/weapp/transition/index';

	// exports.__esModule = true; // orderSub/pages/orderDetails/orderDetails.ts
	//#ifdef H5
	import { toCDGJWechatMiniPay, toCDGJH5UrlPay } from '@/utils/h5.js';
	//#endif
import { wait } from '@/utils/tools.js';
	
	var https_1 = require("./../../../api/https.js");
	var app = getApp();
	var util_1 = require("./../../../utils/util.js");
	var Interval = null;
	export default {
		components: {
			capsule,
			navLod,
			orderSteps,
			orderCollapseItem,
			orderCollapse,
			// vanCollapse,
			// vanCollapseItem,
			// vanSteps,
			// vanTransition
		},
		data() {
			return {
				marketingSwitch: app.globalData.marketingSwitch,
				sellerNo: app.globalData.sellerNo,
				unifiedOrderStstus: false,
				getRechargeResultNum: 1,
				explain: false,
				showRefundTips: true,
				showPaidTips: true,
				orderStatus: 3,

				det: {
					stationName: false,
					pileNumber: false,
					gunName: false,
					billTypeStr: "",
					busBalance: "",
					powerBalance: "",
					serviceBalance: "",
					totalDiscountBalance: "",
					payAccountStr: "",
					memberDiscountBalance: "",
					ruleType: "",
					discountBalance: "",
					deductibleBalance: "",
					cashCouponBalance: 0,
					couponTypeStr: "",
					billStatus: 0,
					billPayLog: [],
					actualBalance: "",
					memberType: 0,
					refundCoupon: false,
					busId: "",
					isSuper: false,
					chargeType: "",
					timeS: "",
					difference: "",
					endReasonStr: false,
					timeE: "",
					plateNo: false,
					sumPower: "",
					endSoc: false,
				},

				activeNames: [],
				active: 2,
				steps: [],
				orderNo: '',
				outTradeNo: '',
				guns: [{
						value: 0,
						name: "A",
					},
					{
						value: 1,
						name: "B",
					},
					{
						value: 2,
						name: "C",
					},
					{
						value: 3,
						name: "D",
					},
					{
						value: 4,
						name: "E",
					},
					{
						value: 5,
						name: "F",
					},
					{
						value: 6,
						name: "G",
					},
					{
						value: 7,
						name: "H",
					},
					{
						value: 8,
						name: "I",
					},
					{
						value: 9,
						name: "J",
					},
					{
						value: 10,
						name: "K",
					},
					{
						value: 11,
						name: "L",
					},
					{
						value: 12,
						name: "M",
					},
					{
						value: 13,
						name: "N",
					},
					{
						value: 14,
						name: "O",
					},
					{
						value: 15,
						name: "P",
					},
					{
						value: 16,
						name: "Q",
					},
					{
						value: 17,
						name: "R",
					},
					{
						value: 18,
						name: "S",
					},
					{
						value: 19,
						name: "T",
					},
					{
						value: 20,
						name: "U",
					},
					{
						value: 21,
						name: "V",
					},
					{
						value: 22,
						name: "W",
					},
					{
						value: 23,
						name: "X",
					},
					{
						value: 24,
						name: "Y",
					},
					{
						value: 25,
						name: "Z",
					},
				],

				showCustom: "",
				widnowH: uni.getSystemInfoSync().screenHeight,
				bar_Height: uni.getSystemInfoSync().statusBarHeight,

				serviceInfo: {
					customerTelephone: '',
					customerServiceTime: ''
				},

				showShrink: false,
				showInfo: false,
				sellerPayConfig:{},
				isv2g: false, // #V2G功能
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// 1:进行中 2：待支付 3：已完成 4：已关闭
			if (options.type == 1) {} else if (options.type == 2) {
				this.orderStatus = 2;
			} else if (options.type == 3) {
				this.orderStatus = 3;
			} else if (options.type == 4) {
				this.orderStatus = 1;
			}

			this.isH5PayCallback = options.isH5PayCallback;

			this.getDetails(options.orderId);
			this.getRefundAmount()
			
			this.orderIds = options.orderId;
			
			this.getSellerPayConfig() 
		},
		onShow: function() {
			this.getDetails(this.orderIds);
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		onPageScroll: function(e) {
			let height =
				this.widnowH <= 568 ? this.bar_Height + 40 : this.bar_Height + 45;
			if (e.scrollTop > height) {
				this.setData({
					showCustom: true,
				});
			} else {
				this.setData({
					showCustom: false,
				});
			}
		},
		methods: {
			toPlaceholderOrderDetail(id) {
				uni.navigateTo({
					url: '/orderSub/pages/placeholderOrderDetail/placeholderOrderDetail?id=' + id
				})
			},
			//去评论
			orderTop: function(e) {
				console.log(e, "去评论....");
				
				// uni.navigateTo({
				//   url: `../orderMsg/orderMsg?busId=${e.currentTarget.dataset.busid}&id=${e.currentTarget.dataset.id}&commentstatus=${e.currentTarget.dataset.commentstatus}`,
				// });
				// 如果是二轮就跳转到二轮的详情页
				if(this.det.terminalType == 2) {
					uni.navigateTo({
						url: '/homeSub/pages/eBikeSiteDetail/eBikeSiteDetail?stationId=' + e.currentTarget.dataset.stationid
					});
				}else{
					uni.navigateTo({
						url: '/homeSub/pages/siteDetail/siteDetail?stationId=' + e.currentTarget.dataset.stationid
					});
				}
				
			},
			//去支付
			goPay: function(e) {
				if (!this.marketingSwitch) {
					uni.navigateTo({
						url: '../orderSettlement/orderSettlement?busId=' + e.currentTarget.dataset.busid
					});
				} else {
					uni.navigateTo({
						url: '../orderSettlementYxhk/orderSettlement?busId=' + e.currentTarget.dataset.busid
					});
				}
				// uni.navigateTo({
				//   url:
				//     "../orderSettlement/orderSettlement?busId=" +
				//     e.currentTarget.dataset.busid,
				// });
			},
			// 获取商家支付配置
			getSellerPayConfig(){
				getSellerPayConfigBySellerId(getApp().globalData.sellerId).then(res=>{
					console.log('这是商家支付配置1',res)
					if(res.code == 0){
						this.sellerPayConfig = res.data || {}
						// this.sellerPayConfig.isUseCcbPay = true
					}
				})
			},
			//立即支付
			unifiedOrders: function(e) {
				var that = this;
				let {isUseCcbPay} = this.sellerPayConfig
				if (!that.unifiedOrderStstus) {
					that.unifiedOrderStstus = true
					uni.showLoading({
						title: '支付中...',
						mask: true
					});
					
					let tradeType = 'JSAPI'
					let ccbPay = 0
					// 建行支付
					if(isUseCcbPay){
						ccbPay = 1
					}

					//#ifdef H5
					if (that.isCdgj()) {
						if (uni.getStorageSync('clientType') == 'APP') {
							tradeType = 'MWEB' // 内嵌APP端
						}
					}
					//#endif

					let reqForm = {
						openId: uni.getStorageSync('openId'),
						totalFee: this.det.arrears,
						tradeType, // 交易类型：JSAPI -JSAPI支付 NATIVE -Native支付 APP -APP支付
						billId: that.orderIds,
						ccbPay,
						totalYuan:(this.det.arrears/100)
					}
					// #ifdef MP-ALIPAY
					reqForm.payType = 2
					// #endif
					https_1
						.unifiedOrdersExceedMoney(reqForm)
						.then(function(res) {
							if (res.code == 0) {
								//微信
								
								// #ifndef MP-ALIPAY
								var getpar = {
									timeStamp: res.data.timeStamp,
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									paySign: res.data.sign,
									orderNo: res.data.orderNo,
									cshdk_Url:res.data.cshdk_Url
								};
								// #endif
								
								// #ifdef MP-ALIPAY
								var getpar = {
									tradeNO: res.data.orderNo,
									outTradeNo: res.data.outTradeNo
								};
								// #endif
								that.orderNo = res.data.orderNo
								that.outTradeNo = res.data.outTradeNo

								// #ifdef H5
								if (that.isCdgj()) {
									that.cdgjH5Pay(res.data);
								} else {
									that.goDisposablePay(getpar);
								}
								// #endif

								// #ifndef H5
								that.goDisposablePay(getpar);
								// #endif
							}
							uni.hideLoading();
						})['catch'](function(res) {
							uni.hideLoading();
							uni.showModal({
								title: '支付失败',
								content: res.msg || '服务异常',
								showCancel: false
							});
						});
				}
			},

			// 成都公交-H5二次拉起支付
			cdgjH5Pay(payData) {
				const urlParams = util_1.getUrlDataToObj(window.location.href)
				const params = {
					...urlParams,
					orderNo: this.orderNo,
					isH5PayCallback: 1,
				}
				let callbackUrl = encodeURIComponent(`${app.globalData.imgUrl}/h5/${app.globalData.sellerNo}/#/orderSub/pages/orderDetailsYxhk/orderDetailsYxhk${util_1.setOptionsToUrlQuery(params)}`);
				const clientType = uni.getStorageSync('clientType')

				if (clientType == 'WeChat') {
					// H5 内嵌小程序端 
					toCDGJWechatMiniPay(payData, callbackUrl)
				} else {
					// H5 内嵌APP端 
					toCDGJH5UrlPay(payData, callbackUrl)
				}
			},

			//调起支付
			goDisposablePay: function(data) {
				var that = this;
				let {isUseCcbPay} = this.sellerPayConfig
				if(isUseCcbPay){
					that.getRechargeResult();
					console.log(data.cshdk_Url,'复制的内容')
					uni.setClipboardData({
						data:data.cshdk_Url
					})
				}else{
					// #ifndef MP-ALIPAY
					uni.requestPayment({
						timeStamp: data.timeStamp + '',
						nonceStr: data.nonceStr,
						package: data.package,
						signType: 'MD5',
						paySign: data.paySign,
						success: function() {
							that.getRechargeResult();
							that.unifiedOrderStstus = false
						},
						fail: function() {
							that.cancelCharge()
							that.unifiedOrderStstus = false
						}
					});
					// #endif
					
					// #ifdef MP-ALIPAY
					my.tradePay({
						// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号 trade_no
						tradeNO: data.tradeNO,
						success: res => {
							console.log('调用 my.tradePay 成功: ', JSON.stringify(res));
							that.unifiedOrderStstus = false
							if(res.resultCode != 9000){
								that.cancelCharge()
							}else{
								that.getRechargeResult();
							}
						},
						fail: error => {
							that.cancelCharge()
							that.unifiedOrderStstus = false
							console.error('调用 my.tradePay 失败: ', JSON.stringify(error));
					
						},
					});
					// #endif
					
				}
			},
			//取消充值 -- 支付前
			cancelCharge: function() {
				https_1
					.unifiedOrdersExceedMoney({
						totalFee: this.det.arrears,
						tradeType: 'APP',
						orderNo: this.orderNo,
						cancelRecharge: 2,
						billId: this.orderIds
					})
					.then((res) => {
						if (res.code == 0) {
							uni.showModal({
								title: '消息提示',
								content: '已取消支付',
								showCancel: false
							});
						}
					});
			},
			//启动充电-充完即退-微信取消充值 -- 支付后
			disposableCancelRecharge: function() {
				var that = this;
				let reqForm =  {
					orderNo: this.orderNo,
				}
				// #ifdef MP-ALIPAY
				 reqForm.payType = 2
				reqForm.outTradeNo = that.outTradeNo
				// #endif
				https_1
					.disposableCancelRecharge(reqForm)
					.then(function() {
						that.getRechargeResultNum = 1
						// uni.showToast({
						// 	title: "取消成功",
						// 	icon: 'none'
						// });
					});
			},
			//查询支付结果
			getRechargeResult: function() {
				var that = this;
				uni.showLoading({
					title: '支付中..',
					mask: true
				})
				this.disposableOrderResultQuery();
				let count = 10
				let msec = 3000
				// 建行设置轮询时间
				if(that.sellerPayConfig.isUseCcbPay){
					count = 10000
					msec = 30000
				}
				this.Interval = setInterval(function() {
					if (that.getRechargeResultNum > count) {
						uni.hideLoading()
						clearInterval(that.Interval);
						that.disposableCancelRecharge();
					} else {
						that.disposableOrderResultQuery();
					}
				}, msec);
			},
			//启动充电-充完即退-微信查询支付结果
			disposableOrderResultQuery: function() {
				var that = this;
				var num = this.getRechargeResultNum + 1;
				this.getRechargeResultNum = num
				let reqForm = {
					orderNo: this.orderNo
				}
				// #ifdef MP-ALIPAY
				reqForm.payType = 2
				reqForm.outTradeNo = that.outTradeNo
				// #endif
				https_1
					.disposableOrderResultQuery(reqForm)
					.then(function(res) {
						if (res.code === 0) {
							clearInterval(that.Interval);
							that.getRechargeResultNum = 1
							
							if(that.sellerPayConfig.isUseCcbPay){
							  setTimeout(() => {
								uni.hideLoading()
								that.queryBillInfo()
							  }, 5000);
							}else{
								uni.hideLoading()
								that.queryBillInfo()
							}
						}
					});
			},
			queryBillInfo() {
				var that = this;
				https_1
					.queryBillInfo({
						billId: this.orderIds,
					})
					.then(function(res) {
						if (res.data) {
							that.orderStatus = 3
							uni.showModal({
								title: '消息提示',
								content: '支付成功',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										// uni.redirectTo({
										// 	url:'../order/order?orderTypeIndex=0'
										// })
									}
								}
							});
							that.getDetails(that.orderIds);
						}
					})
			},
      
			reloadPayStatusIfIsH5InApp(){
				var clientType = uni.getStorageSync('clientType');
				console.log(this.isH5PayCallback, clientType, '是否是h5内嵌app端');
				if(!this.isH5PayCallback || clientType != "APP") return
				if(this.timer) return
				if(this.timerCount > 5) return this.timerCount = 0
				if(!this.timerCount) this.timerCount = 0
				this.timer = setTimeout(() => {
					this.timer = null		
					this.timerCount++			
					this.getDetails(this.orderIds)
				}, 2000);
			},

			// 获取订单详情
			getDetails:async function(id) {
				console.log(id, '订单id', wait)
				var that = this;
				uni.showLoading({
					title: "加载中",
				});
				https_1
					.myBillDetails({
						id: id,
					})
					.then(function(res) {
						if (res.code == 0) {
							uni.hideLoading();

							// #ifdef H5
							// 如果是在是h5内嵌app端，需要轮询获取支付状态
							if([12].includes(+res.data.billStatus)) {
								that.reloadPayStatusIfIsH5InApp()
							}
							// #endif

							res.data.difference = that.getDateDiff(
								res.data.timeS,
								res.data.timeE
							);
							res.data.timeS = res.data.timeS ? res.data.timeS.split(" ") : res.data.timeS;
							res.data.timeE = res.data.timeE ? res.data.timeE.split(" ") : res.data.timeE;

							//这两个有可能是null情况,直接去取js会报错;
							if (res.data.timeS) {
								res.data.timeS[0] = res.data.timeS[0].split("-")[1] + '月' + res.data.timeS[0].split("-")[2] + '日';
							}
							if (res.data.timeE) {
								res.data.timeE[0] = res.data.timeE[0].split("-")[1] + '月' + res.data.timeE[0].split("-")[2] + '日';
							}

							// res.data.timeS[0] = res.data.timeS[0].split("-")[1]+'月'+res.data.timeS[0].split("-")[2]+'日';
							// res.data.timeE[0] = res.data.timeE[0].split("-")[1]+'月'+res.data.timeE[0].split("-")[2]+'日';

							
							res.data.sumPower = ((res.data.sumPower || 0) / 1000).toFixed(3) //已充电量

							res.data.arrears = res.data.arrears; //待支付
							res.data.actualBalance = that.regFenToYuan(res.data.actualBalance); //实收

							res.data.busBalance = that.regFenToYuan(res.data.busBalance); //订单金额

							res.data.powerBalance = that.regFenToYuan(res.data.powerBalance); //未折扣的电费


							res.data.serviceBalance = that.regFenToYuan(
								res.data.serviceBalance
							); //未折扣的服务费

							res.data.totalDiscountBalance = that.regFenToYuan(
								res.data.totalDiscountBalance
							); //优惠金额


							res.data.stationBalance = that.regFenToYuan(
								res.data.stationBalance
							); //站点优惠

							res.data.memberDiscountBalance = that.regFenToYuan(
								res.data.memberDiscountBalance
							); //会员折扣

							res.data.contractBalance = that.regFenToYuan(
								res.data.contractBalance
							); //合约优惠的金额

							res.data.deductibleBalance = that.regFenToYuan(
								res.data.deductibleBalance
							); //奖励金抵扣金额



							res.data.powerCoupon = that.regFenToYuan(res.data.powerCoupon); //电费券抵扣的金额

							res.data.refundCoupon = that.regFenToYuan(res.data.refundCoupon); //退款金额

							res.data.cashCouponBalance = that.regFenToYuan(
								res.data.cashCouponBalance
							); //卷
							if (res.data.ruleType == 1) {
								res.data.discountBalance = '0.00'
							} else {

							}


							// 电站促销
							res.data.discountBalance = that.regFenToYuan(
								res.data.discountBalance
							);
							// 集团折扣
							res.data.groupDiscountBalance = that.regFenToYuan(
								res.data.groupDiscountBalance
							);



							if (!res.data.gunName) {
								res.data.gunName = that.guns[res.data.gunNumber].name;
							}
							console.log('actualBalance', res.data.actualBalance)

							if (res.data.billStatus == 13 || res.data.billPayLog) {
								// res.data.bePaid = res.data.actualBalance;
								// 设置待支付，
								res.data.unpaid = 0
								// 设置已支付
								res.data.havePaid = 0
								res.data.paidAmount
								res.data.billPayLog.map(function(item, index) {
									if (item.paidAmount) {
										item.paidAmount = that.regFenToYuan(item.paidAmount);
									}
									if (item.debt) {
										item.debt = that.regFenToYuan(item.debt);
									}
									// res.data.bePaid = (res.data.bePaid - item.paidAmount).toFixed(
									//   4
									// );
									return item;
								});
								// res.data.paid = (
								//   res.data.actualBalance - res.data.bePaid
								// ).toFixed(4);
							}

							var str_1 = [];
							res.data.billTimeDetailList.map(function(item) {
								str_1.push({
									title: util_1.formatDateTime(item.startTime).split(" ")[1] +
										"-" +
										util_1.formatDateTime(item.endTime).split(" ")[1],
									desc: "电费：¥" +
										that.regFenToYuan(item.powerBlance) +
										"(¥" +
										that.regFenToYuan(item.powerPrice, true) +
										"/度)",
									desc2: "服务费：¥" +
										that.regFenToYuan(item.seviceBlance) +
										"(¥" +
										that.regFenToYuan(item.servicePrice, true) +
										"/度)",
									val: (that.isv2g ? '放电' : '充电') + (item.power / 1000).toFixed(3) + "度", // #V2G功能
								});
							});
							console.log(res.data);

							(that.steps = str_1), (that.det = res.data);
						}
						console.log(
							`后端返回的应付金额是${res.data.actualBalance}订单总金额是${res.data.busBalance},优惠总金额是${res.data.totalDiscountBalance}抵扣总金额是${res.data.deductibleBalance}`
						)
						console.log('billPayLog', res.data.billPayLog)
						// 实付金额计算  实付金额=订单总金额-优惠金额-奖励金
						// res.data.actualBalanceCalculate = (res.data.busBalance - (res.data.totalDiscountBalance || 0) - (res.data.deductibleBalance || 0)).toFixed(2)


						console.log('电站促销字段==>', res.data.discountBalance)
						console.log('集团折扣字段==>', res.data.groupDiscountBalance)

						res.data.chargeCardBalance = Number((res.data.chargeCardBalance / 100 || 0)).toFixed(2); //电量卡抵扣费用
						res.data.useCouponAmount = res.data.useCouponAmount ? Number((res.data.useCouponAmount / 100)).toFixed(
							2) : res.data.useCouponAmount; //服务费折扣金额


						res.data.actualBalanceCalculate = res.data.actualBalance
						// 结算退回计算 预付金额 - 实付金额
						res.data.backAmountCalculate = (res.data.preFrozenAmount - Number(res.data.actualBalanceCalculate || 0))
							.toFixed(2)
						res.data.backAmountCalculate = res.data.backAmountCalculate < 0 ? 0 : res.data.backAmountCalculate
						// 结算退回计算 待支付状态显示0
						if (res.data.billStatus == 13 || res.data.billStatus == 12 || res.data.billStatus == 11) {
							res.data.backAmountCalculate = '0.00'
						}

						// // 会员折扣
						// if (res.data.finishedBillDetail && res.data.finishedBillDetail.payMemberDiscountFee && res.data
						// 	.finishedBillDetail.payMemberDiscountFee > 0) {
						// 	res.data.finishedBillDetail.payMemberDiscountFee = (res.data.finishedBillDetail.payMemberDiscountFee /
						// 		100).toFixed(2);
						// } else {
						// 	res.data.finishedBillDetail.payMemberDiscountFee = '0.00';
						// }

						// 会员折扣 11.6号谢南要求
						if (res.data.memberDiscountFee > 0) {
							res.data.memberDiscountFee = (res.data.memberDiscountFee / 100).toFixed(2);
						} else {
							res.data.memberDiscountFee = '0.00';
						}



						//卡优惠 1205谢南新增卡优惠字段
						if (res.data.discountCardBalance) {
							res.data.discountCardBalance = (res.data.discountCardBalance / 100).toFixed(2)
						} else {
							res.data.discountCardBalance = '0.00'
						}
						
						

						//劵优惠
						res.data.finishedBillDetail = res.data.finishedBillDetail || {}
						res.data.finishedBillDetail.couponDiscountFee = res.data.finishedBillDetail.couponDiscountFee || 0
						if (res.data.finishedBillDetail && res.data.finishedBillDetail.couponDiscountFee && res.data
							.finishedBillDetail.couponDiscountFee > 0) {
							res.data.finishedBillDetail.couponDiscountFee = (res.data.finishedBillDetail.couponDiscountFee / 100)
								.toFixed(2)
						} else {
							res.data.finishedBillDetail.couponDiscountFee = '0.00'
						}
						res.data.maxPower = res.data.maxPower?res.data.maxPower/1000: 0
						that.det = res.data;
						// #V2G功能
						if (that.isV2GOption) {
							that.isv2g = res.data.disCharge ? true : false
						}

						uni.hideLoading();
					});
			},

			//计算时间差
			getDateDiff: function(startTime, endTime) {
				//将日期字符串转换为时间戳
				var sTime = startTime ? Date.parse(startTime.replace(/-/g, "/")) : "--"; //开始时间

				var eTime = endTime ? Date.parse(endTime.replace(/-/g, "/")) : "--"; //结束时间
				//作为除数的数字

				var divNumSecond = 1000;
				var divNumMinute = 1000 * 60;
				var divNumHour = 1000 * 3600;
				var divNumDay = 1000 * 3600 * 24;
				var day = parseInt((eTime - sTime) / parseInt(divNumDay));
				var hour = parseInt(
					((eTime - sTime) % parseInt(divNumDay)) / parseInt(divNumHour)
				);
				var minute = parseInt(
					parseInt(
						((eTime - sTime) % parseInt(divNumDay)) % parseInt(divNumHour)
					) / parseInt(divNumMinute)
				);
				var second =
					(parseInt(
							((eTime - sTime) % parseInt(divNumDay)) % parseInt(divNumHour)
						) %
						parseInt(divNumMinute)) /
					parseInt(divNumSecond);
				var time = day * 24 + hour;

				if (second < 10) {
					second = "0" + second;
				}

				if (minute < 10) {
					minute = "0" + minute;
				}

				if (time < 10) {
					time = "0" + time;
				}

				var str = time + ":" + minute + ":" + second;
				return str;
			},

			onChange: function(event) {
				this.activeNames = event.detail;
			},

			// 支付说明
			clickExplain: function() {
				this.explain = !this.explain;
			},

			// 退款提示框
			showRefundTipsFun: function() {
				this.showRefundTips = false;
			},

			showPaidTipsFun: function() {
				this.showPaidTips = false;
			},

			// 分转元
			regFenToYuan: function(fen, s) {
				var num = 0;

				if (!s) {
					num = (fen / 100).toFixed(2);
				} else {
					num = (fen / 10000).toFixed(2);
				}

				return num;
			},

			// 复制订单号
			copyOrder: function(e) {
				uni.setClipboardData({
					data: e.currentTarget.dataset.busid,
				});
			},

			//客服电话
			callCustomer: async function() {
				this.$refs.showCustomerPup.close()
				//#ifdef APP-PLUS
					let result = await this.$store.dispatch("requestPermissions",'CALL_PHONE')
					if (result !== 1){
						return
					}else{
						uni.makePhoneCall({
							phoneNumber: this.serviceInfo.customerTelephone
						});
					}    
				//#endif
				//#ifdef MP-WEIXIN
					uni.makePhoneCall({
						phoneNumber: this.serviceInfo.customerTelephone
					});
				//#endif
			},
			call: function() {
				this.$refs.showCustomerPup.open()
			},

			onCloseCustomer: function() {
				this.$refs.showCustomerPup.close()
			},

			getRefundAmount: function() {
				var that = this;
				https_1.refundAmount().then(function(res) {
					if (res.code == 0) {
						that.setData({
							serviceInfo: res.data
						});
					}
				});
			},

			showShrinkButton: function() {
				this.showShrink = !this.showShrink
			},
			InfoShrinkButton: function() {
				this.showInfo = !this.showInfo
			}
		},
	};
</script>
<style lang="less">
	@import "./orderDetails.less";
	@import '../../../commin/flex.less';
	/* orderSub/pages/orderDetails/orderDetails.wxss */

	page {
		background-color: #f4f6f8;
		height: 100vh;
		padding-bottom: 40rpx;
	}

	.placeholPileInfo {
		background: linear-gradient(0deg, #ffffff, #f4f6f8);
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
		border: 2rpx solid #ffffff;
		margin: 16rpx 14rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		line-height: 1;
		padding: 40rpx 30rpx;

		.head {
			margin-bottom: 36rpx;

			.title {
				font-size: 32rpx;
				color: #303133;
			}

			.status {
				font-size: 28rpx;
				color: #FC724C;
			}

			.status1 {
				font-size: 28rpx;
				color: #6DB12E;
			}

			.status2 {
				font-size: 28rpx;
				color: #606266;
			}
		}

		.center-item {
			.minute {
				font-size: 40rpx;
				font-weight: 700;
				color: #303133;
				margin-bottom: 27rpx;

				text {
					font-size: 28rpx;
					font-weight: normal;
				}
			}

			.desc {
				font-size: 28rpx;
				color: #606266;
				margin-bottom: 32rpx
			}
		}

		.p-btn {
			width: 146rpx;
			height: 44rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			border: 1rpx solid #6DB12E;
			font-size: 26rpx;
			color: #6DB12E;
		}
	}

	.header-image {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 556rpx;
	}

	.detCon {
		width: 100%;
		position: relative;
	}

	.detName {
		font-size: 34rpx;
		font-weight: bold;
		color: #18181a;
		margin: 15rpx 0 42rpx 32rpx;
	}

	.demarcation {
		margin: 0 10rpx;

		.demCon {
			margin: 10rpx 14rpx;
			background: linear-gradient(0deg, #ffffff, #f4f6f8);
			box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
			border-radius: 0rpx 0rpx 16rpx 16rpx;
			margin-bottom: 20rpx;
			padding-bottom: 10rpx;

			.demTop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #dcdfe6;
				padding: 40rpx 33rpx 32rpx 33rpx;

				.gunName {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #18181a;
				}

				.status {
					height: 25rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: var(--textColor);
				}
			}

			.demCenter {
				position: relative;
				// height: 200rpx;
				text-align: center;

				.demNum {
					font-size: 64rpx;
					font-weight: bold;
					margin: 55rpx 0 16rpx 0;
				}

				.demTitle {
					color: #606266;
					font-size: 26rpx;
				}

				.symbol {
					font-size: 40rpx;
					color: #000000;
				}

				.demState {
					color: #606266;
					font-size: 28rpx;
					font-weight: 400;
					height: 50rpx;
					line-height: 50rpx;

					image {
						height: 31rpx;
						width: 31rpx;
						vertical-align: text-bottom;
						margin-left: 10rpx;
					}
				}

			}
		}

		.infoCon {
			background: linear-gradient(0deg, #ffffff, #f4f6f8);
			box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
			border: 2rpx solid #ffffff;
			margin: 16rpx 14rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			overflow: hidden;

			.demMoneyTitle {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #606266;
			}

			.demMoneyVal {
				font-size: 28rpx;
				font-weight: 500;
				color: #fc724c;
			}

			.demMoneyList {
				padding: 25rpx 31rpx 20rpx 31rpx;
				line-height: 34rpx;
				display: flex;
				justify-content: space-between;

				.totalCon {
					text-align: right;

					.totalDetailed {
						margin-top: 20rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #909399;
						line-height: 34rpx;
						opacity: 0.9;
					}

					.order {
						font-size: 30rpx;
						font-weight: 500;
						color: #303133;
					}

					.copyButton {
						font-size: 28rpx;
						font-weight: 400;
						color: var(--textColor);
						display: inline-block;
						border-left: 1px solid #909399;
						padding: 0 0 0 20rpx;
						margin-left: 20rpx;
					}
				}
			}

			.infoTop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 39rpx 32rpx 32rpx 34rpx;

				.gunName {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #18181a;
				}

				.status {
					color: #DB9132;
					text-align: center;
					line-height: 40rpx;
					// width: 76rpx;
					padding: 0 12rpx;
					height: 40rpx;
					background: rgba(233, 178, 108, 0.1608);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					opacity: 1;
					display: inline-block;
					font-size: 28rpx;
					font-family: PingFang SC;
					margin-left: 14rpx;

					// color: var(--textColor);
				}
			}

			.infoTimeline {
				text-align: center;
				display: flex;
				justify-content: space-between;
				padding: 42rpx 32rpx 0 32rpx;

				.infoTimeCon {
					display: inline-block;
					width: auto;
					text-align: left;
				}

				.infoTimeData {
					font-weight: 400;
					color: #909399;
					font-size: 26rpx;
					margin: 0 0 15rpx 0;
					text-align: center;
				}

				.infoTime {
					font-weight: bold;
					color: #303133;
					font-size: 34rpx;
					margin-top: 15rpx;
					margin-right: 10rpx;
				}

				.processCon {
					border: 1px solid var(--textColor);
					border-radius: 24px;
					width: 160rpx;
					display: inline-block;
					font-size: 28rpx;
					font-weight: 500;
					color: var(--textColor);
					// background: rgba(109, 177, 46, 0.102);
					position: relative;
					height: 48rpx;
					line-height: 48rpx;
					margin-top: 15rpx;

					&::after {
						content: "";
						border-top: 1px solid #909399;
						position: absolute;
						top: 1;
						width: 40rpx;
						height: 1rpx;
						left: -40rpx;
						top: 24rpx;
					}

					&::before {
						content: "";
						border-top: 1px solid #909399;
						position: absolute;
						top: 1;
						width: 40rpx;
						height: 1rpx;
						right: -40rpx;
						top: 24rpx;
					}
				}

				.processReason {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #606266;
					margin-top: 10rpx;
				}
			}

			.infoList {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 34rpx;

				.infoListTitle {
					width: 200rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #606266;
				}

				.infoListVal {
					word-break: break-all;
					font-size: 28rpx;
					font-weight: 500;
					color: #303133;
					text-align: right;
				}
			}
		}

		.costCon {
			background: linear-gradient(0deg, #ffffff, #f4f6f8);
			box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
			border: 2rpx solid #ffffff;
			margin: 10rpx 10rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			overflow: hidden;

			.van-steps {
				background: none;
			}

			.costTop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #dcdfe6;
				padding: 40rpx 33rpx 32rpx 33rpx;

				.costName {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #18181a;
				}
			}

			.costDet {
				color: #606266;
				font-size: 26rpx;
				margin: 20rpx 20rpx;
			}
		}

		.demMoneyCon {
			>view {
				border: none !important;
				box-shadow: none;
			}

			>text {
				border: none !important;
				box-shadow: none;
			}

			padding: 10rpx 0 10rpx 0;

			.demMoneyTitle {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #606266;
			}

			.demMoneyVal {
				font-size: 28rpx;
				font-weight: 500;
				color: #fc724c;
			}

			.demMoneyList {
				padding: 25rpx 31rpx 20rpx 31rpx;
				line-height: 34rpx;
				display: flex;
				justify-content: space-between;

				.totalCon {
					text-align: right;

					.totalDetailed {
						margin-top: 20rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #909399;
						line-height: 34rpx;
						opacity: 0.9;
					}

					.order {
						font-size: 30rpx;
						font-weight: 500;
						color: #303133;
					}

					.copyButton {
						font-size: 28rpx;
						font-weight: 400;
						color: var(--textColor);
						display: inline-block;
						border-left: 1px solid #909399;
						padding: 0 0 0 20rpx;
						margin-left: 20rpx;
					}
				}
			}

			.demMoneyMore {
				background: #f5f7fa;
				padding: 20rpx 24rpx 10rpx 24rpx;
				margin: 0 32rpx 32rpx 32rpx;

				.MoneyMoreList {
					font-size: 26rpx;
					color: #303133;
					display: flex;
					justify-content: space-between;
					margin-bottom: 32rpx;

					.MoneyMoreVal {
						color: #606266;
					}
				}

				.MoneyMoreList2 {
					font-size: 26rpx;
					color: #303133;
					display: flex;
					justify-content: space-between;

					.MoneyMoreVal {
						color: #606266;
					}
				}

				.totalDetailed {
					text-align: right;
					margin: 9rpx 0 29rpx 0;
					font-size: 26rpx;
					font-weight: 400;
					color: #909399;
					line-height: 34rpx;
					opacity: 0.9;
				}
			}
		}

		.van-cell:after {
			display: none !important;
		}

		.van-collapse-item__content {
			padding-top: 0px;
		}
	}

	.refundTipsCon {
		width: 100%;
		background: #595c69;
		opacity: 0.6;
		height: 80rpx;
		line-height: 80rpx;
		color: #ffffff;
		position: fixed;
		bottom: 0;
		font-size: 28rpx;
		font-weight: 500;

		image {
			height: 32rpx;
			width: 32rpx;
			vertical-align: middle;
			margin: 0 20rpx;
		}
	}

	.refundCon {
		width: 100%;
		background: #595c69;
		opacity: 0.6;
		height: 80rpx;
		line-height: 80rpx;
		color: #ffffff;
		position: fixed;
		bottom: 130rpx;
		font-size: 28rpx;
		font-weight: 500;

		image {
			height: 32rpx;
			width: 32rpx;
			vertical-align: middle;
			margin: 0 20rpx;
		}
	}

	.explainTipsCon {
		z-index: 2;
		display: inline;
		width: 702rpx;
		background: #303133;
		opacity: 0.8;
		padding: 20rpx 0;
		color: #ffffff;
		position: fixed;
		bottom: 150rpx;
		font-size: 28rpx;
		font-weight: 500;
		margin: 0 24rpx;
		border-radius: 10rpx;

		.explainTipsImg {
			text-align: right;

			image {
				height: 32rpx;
				width: 32rpx;
				vertical-align: middle;
				margin: 0 20rpx;
			}
		}

		.explainTipsText {
			margin: 33rpx;
			font-size: 26rpx;
			letter-spacing: 2rpx;
			line-height: 42rpx;
		}
	}

	.parkingRate {
		color: #606266;
		font-size: 24rpx;
		padding: 5rpx 40rpx 22rpx 40rpx;

		.img {
			width: 25rpx;
			height: 25rpx;
			vertical-align: middle;
			margin-right: 15rpx;
		}
	}

	.paymentCon {
		height: 120rpx;
		line-height: 120rpx;
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		background: linear-gradient(0deg, #ffffff, #f4f6f8);
		border: 2px solid rgba(255, 255, 255, 0.55);
		box-shadow: 0px -25px 67px 0px rgba(177, 182, 190, 0.2);
		text-align: center;
		z-index: 999;

		view {
			height: 88rpx;
			background: var(--btnColor);
			box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
			border-radius: 44rpx;
			text-align: center;
			line-height: 88rpx;
			font-weight: bold;
			color: #ffffff;
			font-size: 30rpx;
			display: inline-block;
			width: 680rpx;
		}
	}

	.money {
		color: #606266;
		font-size: 26rpx;
		text-align: right;
		font-weight: 500;
	}

	.tc {
		font-size: 34rpx;
		font-weight: bold;
	}

	.tc1 {
		font-size: 28rpx;
		font-weight: bold;
	}


	.detTopCon {
		margin: 0rpx 32rpx;
		color: #FFFFFF;
		font-weight: 400;
		font-weight: 400;
	}

	.detTopName {
		font-size: 36rpx;
		padding-top: 64rpx;

	}

	.detTopText {
		font-size: 24rpx;
		margin: 24rpx 0 41rpx 0;
	}

	.shrink {
		font-size: 24rpx;
		font-weight: 400;
		color: var(--textColor);
		line-height: 34rpx;
		text-align: center;
		margin-bottom: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.turn {
			width: 25rpx;
			height: 12rpx;
			margin-left: 16rpx;
		}

		.sanjiao-icon {
			width: 0;
			height: 0;
			border-top: 14rpx solid transparent; 
			border-right: 14rpx solid transparent;
			border-left: 14rpx solid transparent;
			border-bottom: 14rpx solid var(--btnColor);
			margin-top: -14rpx;
			margin-left: 12rpx;
		}

		.sanjiao-icon-up {
			width: 0;
			height: 0;
			border-bottom: 14rpx solid transparent; 
			border-right: 14rpx solid transparent;
			border-left: 14rpx solid transparent;
			border-top: 14rpx solid var(--btnColor);
			margin-top: 14rpx;
			margin-left: 12rpx;
		}
	}

	.OrderReason {
		margin: 42rpx 32rpx 0 32rpx;
		font-weight: 400;
		color: #FC724C;
		font-size: 24rpx;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
		padding-bottom: 40rpx;

		.turn {
			width: 24rpx;
			height: 24rpx;
			margin-right: 8rpx;
			vertical-align: middle;
		}
	}

	.orderClothes {
		font-weight: 400;
		color: #606266;
		font-size: 24rpx;
		text-align: center;
		margin: 40rpx 0;

		.orderClothesText {
			color: var(--textColor);
		}
	}

	.orderBottom {
		border-top: 1rpx solid #DCDFE6;
		margin: 0rpx 32rpx;
	}
</style>